<template>
    <div>
        <SuperTable ref="table" path="/partner/sku/index" :params="params" :columns="columns">
            <Button slot="header-left" icon="ios-download-outline" type="primary" @click="handleExport">导出筛选数据</Button>
            <div slot="header-right">
                <Form ref="filter" :model="filter" inline>
                    <FormItem label="关键词">
                        <Input v-model="filter.keywords" clearable placeholder="商户号、名称、手机号" style="width: 240px;" />
                    </FormItem>
                    <FormItem label="状态" prop="status">
                        <Select v-model="filter.status" clearable style="width: 80px">
                            <Option :value="0">下架</Option>
                            <Option :value="1">上架</Option>
                        </Select>
                    </FormItem>
                    <Button type="primary" @click="handlFilter">筛选</Button>
                </Form>
            </div>
        </SuperTable>
    </div>
</template>

<script>
import SuperTable from '@/components/utils/super-table.vue';
import TableRows from '@/components/utils/table-rows.vue';
import axios from "axios";
import { host } from '@/config/index.js';
import Cookies from 'js-cookie';
export default {
    components: {
        SuperTable,
        TableRows
    },
    data() {
        return {
            filter: {
                keywords: '',
                status: '',
            },
            params: {
                keywords: '',
                status: '',
                page: 1,
                pageSize: 10,
            },
            columns: [
                {
                    title: '商家信息',
                    minWidth: 100,
                    render: (h, params) => {
                        return h(TableRows,[
                            h('p',`商户号：${params.row.partner_id}`),
                            h('p',`名称：${params.row.partner ? params.row.partner.name : ''}`),
                        ])
                    }
                },
                {
                    title: '票档信息',
                    minWidth: 150,
                    render: (h, params) => {
                        return h(TableRows, {
                            props: {
                                src: params.row.project.img || '/static/images/default_avatar.png'
                            }
                        }, [
                            h('p',params.row.project.project_name),
                            h('p',`${params.row.concert.name + ' ' + params.row.sku.name}`),
                        ])
                    }
                },
                {
                    title: '模式&售价',
                    minWidth: 100,
                    render: (h, params) => {
                        return h(TableRows,[
                            h('p',params.row.sale_mode_text),
                            h('p', {style:{color:'red'}}, params.row.discount > 0 ? params.row.price+'（'+Number(params.row.discount)+'折）' : params.row.price),
                        ])
                    }
                },
                {
                    title: '库存&销量',
                    render: (h, params) => {
                        return h(TableRows,[
                            h('p',`库存：${params.row.stocks}`),
                            h('p',`销量：${params.row.sales}`),
                        ])
                    }
                },
                {
                    title: '售卖方式&拆单费',
                    render: (h, params) => {
                        return h(TableRows,[
                            h('p',`${params.row.sale_type_text}`),
                            h('p', params.row.discount == 0 ? '无' : `${params.row.split_price}`),
                        ])
                    }
                },
                {
                    title: '出票方式&状态',
                    render: (h, params) => {
                        return h(TableRows,[
                            h('p', [
                                h('Tag', {
                                    props: {
                                        color: params.row.ticket_type == 1 ? 'blue' : 'green'
                                    }
                                }, params.row.ticket_type_text)
                            ]),
                            h('p',`${params.row.status_text}`),
                        ])
                    }
                },
                {
                    title: '创建&更新时间',
                    minWidth: 150,
                    render: (h, params) => {
                        return h(TableRows,[
                            h('p',`${params.row.created_at}`),
                            h('p',`${params.row.updated_at}`),
                        ])
                    }
                },
                {
                    title: "操作",
                    align: "center",
                    key: "action",
                    width: 200,
                    render: (h, params) => {
                        let btns = [
                            
                        ];
                        return h("div", btns);
                    }
                }
            ]
        }
    },
    mounted() {

    },
    methods: {
        handlFilter() {
            const { filter } = this;
            this.params.keywords = filter.keywords;
            this.params.status = filter.status;
            this.$refs.table.init();
        },
        handleExport() {
            axios({
                url: host+'/partner/sku/export', // 替换为你的文件URL
                headers: {Authorization: 'Bearer ' + Cookies.get('token')},
                data: this.filter,
                method: 'POST',
                responseType: 'blob', // 设置响应类型为blob
            }) .then((res) => {
                let blob = new Blob([res.data],{type:"application/octet-stream;"});
                let aLink = document.createElement("a");
                aLink.download = '服务商导出记录.xlsx';
                aLink.href = URL.createObjectURL(blob);
                aLink.dispatchEvent(
                    new MouseEvent("click", {
                        bubbles: true,
                        cancelable: true,
                        view: window,
                    })
                ); // 兼容火狐
            })
        },
    }
}
</script>